// pages/demo07/line/line.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  //绘制基本图形
  drawSample: function () {
    let ctx = this.ctx
    //绘制三角形
    ctx.beginPath()
    ctx.moveTo(150, 75)
    ctx.lineTo(225, 225)
    ctx.lineTo(75, 225)
    ctx.closePath()
    ctx.stroke()
  },
  //线条加粗
  setLineWidth: function () {
    this.ctx.lineWidth=20
    this.drawSample()
  },
  //圆形交点
  setLineJoin: function () {
    this.ctx.lineJoin='round'
    this.drawSample()
  },
  //虚线效果
  setLineDash: function () {
    this.ctx.setLineDash([10, 20])
    this.drawSample()
  },
  //清除
  reset: function () {
    let ctx = this.ctx
    ctx.clearRect(50, 50, 200, 200);
    ctx.lineWidth = 1
    ctx.lineJoin = 'miter'
    ctx.setLineDash([])
    //this.drawSample()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //创建画布上下文
    let that = this
    const query = wx.createSelectorQuery()
    query.select("#myCanvas")
      .fields({
        node: true
      })
      .exec((res) => {
        const canvas = res[0].node
        that.ctx = canvas.getContext('2d')

        //tip: Canvas 2D（新接口）需要显式设置画布宽高 (默认为 300x150)
        that.ctx.lineWidth = 10
        canvas.width = 300;
        canvas.height = 300;
        that.drawSample()

      })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})